<template>
  <view class="page page-grey page-coupon-supplier">
    <view class="supplier-list">
      <view class="supplier-item" v-for="item in listData" :key="item.id + ''">
        <view class="supplier-item-right">
          <view class="right-title">{{ item.companyName }}</view>
          <view class="right-list">
            <view class="right-text">
              统一信用代码 <span class="right-value">{{ item.creditCode }}</span>
            </view>
            <view class="right-text">
              上架商品数量 <span class="right-number">{{ item.goodsCount || 0 }}</span><span>个</span>
            </view>
          </view>
        </view>
      </view>
      <fui-empty v-show="!listData.length" :isFixed="true" src="/static/images/empty/data.png" title="暂无供应商数据" size="24" color="#999"></fui-empty>
    </view>
  </view>
</template>

<script setup>
import { ref, inject } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import couponApi from '@/api/coupon'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

const supplierIds = ref('')
const listData = ref([])

onLoad(option => {
  supplierIds.value = option.supplierIds
  getSupplierList()
})

// 供应商数据
const getSupplierList = () => {
  try {
    modal.loading('加载中...')
    couponApi.getCheckedSupplierList(supplierIds.value).then((res) => {
      modal.closeLoading()
      if (res.code === 0){
        listData.value = res.data || []
      } else {
        modal.msgError(res.msg || '获取供应商列表失败！')
      }
    })
  } catch(err){
    modal.closeLoading()
    modal.msgError(err.msg || err || '获取供应商列表失败！')
  }
}
</script>

<style lang="scss" scoped>
.page-coupon-supplier {
  .supplier-list {
    padding: 36rpx;
    .supplier-item {
      display: flex;
      align-items: center;
      width: 100%;
      background: #ffffff;
      border-radius: 16rpx;
      margin-bottom: 32rpx;
      padding: 28rpx !important;
      box-sizing: border-box;

      .supplier-item-right {
        width: 100%;
        .right-title {
          font-size: 28rpx;
          font-weight: bold;
          color: #333333;
          margin-bottom: 16rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .right-list {
          display: flex;
          flex-wrap: wrap;
          .right-text {
            width: 100%;
            font-size: 24rpx;
            font-weight: 400;
            color: #999999;
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;
            white-space: nowrap;

            image {
              padding-right: 10rpx;
            }

            span {
              color: #333333;
            }
            .right-value {
              margin-left: 10rpx;
            }
            .right-number {
              font-weight: bold;
              color: #2c83fc;
              padding: 0 10rpx;
            }
          }
        }
      }
    }
  }
}
</style>